<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>文件管理</title>
    <link rel="stylesheet" type="text/css" th:href="@{/plugins/layui/css/layui.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/common.css}"/>
</head>
<body>

    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-card-body">
                <button type="button" class="layui-btn" id="test1">
                    <i class="layui-icon">&#xe67c;</i>上传图片
                </button>
            </div>
        </div>

        <!-- 上传文件列表 -->
        <div class="layui-card">
            <div class="layui-card-body">
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                    <legend>高级应用：制作一个多文件列表</legend>
                </fieldset>

                <div class="layui-upload">
                    <button type="button" class="layui-btn layui-btn-normal" id="selectFiles">选择多文件</button>
                    <div class="layui-upload-list">
                        <table class="layui-table">
                            <thead>
                            <tr><th>文件名</th>
                                <th>大小</th>
                                <th>状态</th>
                                <th>操作</th>
                            </tr></thead>
                            <tbody id="fileList"></tbody>
                        </table>
                    </div>
                    <button type="button" class="layui-btn" id="uploadAction">开始上传</button>
                </div>
            </div>
        </div>

        <!-- 上传多张图片 -->
        <div class="layui-card">
            <div class="layui-card-body">
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                    <legend>上传多张图片</legend>
                </fieldset>
                <div class="layui-upload">
                    <button type="button" class="layui-btn" id="selectPic">多图片上传</button>
                    <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                        预览图：
                        <div class="layui-upload-list" id="showPicDiv"></div>
                    </blockquote>
                </div>
            </div>
        </div>

        <!-- 拖拽上传 -->
        <div class="layui-card">
            <div class="layui-card-body">
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                    <legend>拖拽上传</legend>
                </fieldset>

                <div class="layui-upload-drag" id="dragUpload">
                    <i class="layui-icon"></i>
                    <p>点击上传，或将文件拖拽到此处</p>
                </div>
            </div>
        </div>

    </div>

    <script th:src="@{/plugins/layui/layui.js}" type="text/javascript" charset="utf-8"></script>
    <script th:src="@{/js/main.js}" type="text/javascript" charset="utf-8"></script>

    <script>
        layui.use(['upload','layer',"jquery"], function() {
            var upload = layui.upload, layer = layui.layer, $ = layui.$;
            //执行实例
            var uploadInst = upload.render({
                elem: '#test1' //绑定元素
                , url: '/v1/file/upload' //上传接口
                , size : 102400
                , done: function (data) {
                   if (data.code === 0) {
                       layer.msg(data.msg);
                   } else if (data.code === -1) {
                       layer.msg(data.msg);
                   } else {
                       layer.msg("上传失败");
                   }
                }
                , error: function () {
                    layer.msg("上传失败");
                }
                , accept: 'file' //允许上传的文件类型
                //,size: 50 设置文件最大可允许上传的大小，单位 KB。不支持ie8/9
            });

            //多文件列表示例
            var demoListView = $('#fileList')
                ,uploadListIns = upload.render({
                elem: '#selectFiles'
                ,url: '/v1/file/uploadFiles'
                ,accept: 'file'
                ,multiple: true
                ,auto: false
                ,bindAction: '#uploadAction'
                ,choose: function(obj){
                    var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                    //读取本地文件
                    obj.preview(function(index, file, result){
                        var tr = $(['<tr id="upload-'+ index +'">'
                            ,'<td>'+ file.name +'</td>'
                            ,'<td>'+ (file.size/1014).toFixed(1) +'kb</td>'
                            ,'<td>等待上传</td>'
                            ,'<td>'
                            ,'<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'
                            ,'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
                            ,'</td>'
                            ,'</tr>'].join(''));

                        //单个重传
                        tr.find('.demo-reload').on('click', function(){
                            obj.upload(index, file);
                        });

                        //删除
                        tr.find('.demo-delete').on('click', function(){
                            delete files[index]; //删除对应的文件
                            tr.remove();
                            uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                        });

                        demoListView.append(tr);
                    });
                }
                ,done: function(res, index, upload){
                    if(res.code == 0){ //上传成功
                        var tr = demoListView.find('tr#upload-'+ index)
                            ,tds = tr.children();
                        tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
                        tds.eq(3).html(''); //清空操作
                        return delete this.files[index]; //删除文件队列已经上传成功的文件
                    }
                    this.error(index, upload);
                }
                ,error: function(index, upload){
                    var tr = demoListView.find('tr#upload-'+ index)
                        ,tds = tr.children();
                    tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
                    tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
                }
            });

            //多图片上传
            upload.render({
                 elem: '#selectPic'
                ,url: '/v1/file/uploadFiles'
                ,multiple: true
                ,before: function(obj){
                    obj.preview(function(index, file, result){
                        $('#showPicDiv').append('<img src="'+ result +'" style="width:300px;height:200px" alt="'+ file.name +'" class="layui-upload-img">')
                    });
                }
                ,done: function(data){
                    if (data.code === 0) {
                        layer.msg(data.msg);
                    } else if (data.code === -1) {
                        layer.msg(data.msg);
                    } else {
                        layer.msg("上传失败");
                    }
                }
            });

            //拖拽上传
            upload.render({
                elem: '#dragUpload'
                ,url: '/v1/file/upload'
                ,done: function(data){
                    if (data.code === 0) {
                        layer.msg(data.msg);
                    } else if (data.code === -1) {
                        layer.msg(data.msg);
                    } else {
                        layer.msg("上传失败");
                    }
                }
            });

        });
    </script>
</body>
</html>